<template>
  <div class="m-25 mt-65 agora">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>考核评分</h2>
        </div>
      </div>

      <!-- 搜索 -->
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">
            <Input class="mr-10" v-model="queryData.scoreId" placeholder="任务编号" style="width: 200px"/>
            <Select class="mr-10" v-model="queryData.assessmentStatus" style="width:150px;" placeholder="考核状态">
                <Option value="1">未审核</Option>
                <Option value="2">已审核</Option>
            </Select>
            <Button class="mr-10" type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="getTableData">查找</Button>
        </div>
    </Card>

      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd" style="width:100%;overflow:auto">
            <Table
              border
              :columns="list.columns"
              :data="list.tableData"
            ></Table>
          </div>
          <div class="row-b">
            <Page
              :total="queryData.totalRecord"
              :page-size="queryData.limit"
              :current="queryData.page"
              show-total
              show-elevator
              @on-change="changePage"
            ></Page>
          </div>
        </div>
      </div>
      <Modal
        v-model="modal1" :closable="false"
        @on-ok="ok">
        <h2>确定要审核本条吗？</h2>
    </Modal>
    <Modal v-model="modal.bigPicVisible" width="1000px">
      <img :src="modal.bigPicUrl" style=" width:100%;height:100%" />
      <div slot="footer"/>
    </Modal>
    </div>
  </div>
</template>
<script>
import gcDispenserApi from '@/api/base_sys/gcDispenser.js'
import { Message } from 'iview'

export default {
  data () {
    return {
      url: '/api/voReview/',
      cId: '',
      modal: {
        bigPicVisible: false,
        bigPicUrl: ''
      },
      list: {
        selections: [],
        // 列表展示数据
        tableData: [],
        columns: [
          {
            title: '考核编号',
            key: 'id',
            align: 'center',
            minWidth: 100,
            fixed: 'left'
          },
          {
            title: '任务编号',
            key: 'scoreId',
            align: 'center',
            minWidth: 100
          },
          // {
          //   title: "考核方式",
          //   key: "assessmentMethod",
          //   align: "center",
          //   minWidth: 50,
          // },
          {
            title: '分类质量(30分)',
            key: 'classificationQuality',
            align: 'center',
            minWidth: 130
          },
          {
            title: '分类设施(40分)',
            key: 'classificationFacility',
            align: 'center',
            minWidth: 130
          },
          {
            title: '分类辅导(15分)',
            key: 'classificationCoaching',
            align: 'center',
            minWidth: 130
          },
          {
            title: '分类清运(15分)',
            key: 'classificationQingyun',
            align: 'center',
            minWidth: 130
          },
          {
            title: '总分数(100分)',
            key: 'selfScore',
            align: 'center',
            minWidth: 130
          },
          {
            title: '图片1',
            key: 'picUrl1',
            align: 'center',
            minWidth: 70,
            render: (h, p) => {
              let a = p.row.picUrl1
              return h('img',
                {
                  attrs: { src: a },
                  style: { width: '100%', height: '30px' },
                  on: { click: () => { this.showBigPic(a) } }
                })
            }
          }, {
            title: '图片2',
            key: 'picUrl2',
            align: 'center',
            minWidth: 70,
            render: (h, p) => {
              let a = p.row.picUrl2
              return h('img',
                {
                  attrs: { src: a },
                  style: { width: '100%', height: '30px' },
                  on: { click: () => { this.showBigPic(a) } }
                })
            }
          }, {
            title: '图片3',
            key: 'picUrl3',
            align: 'center',
            minWidth: 70,
            render: (h, p) => {
              let a = p.row.picUrl3
              return h('img',
                {
                  attrs: { src: a },
                  style: { width: '100%', height: '30px' },
                  on: { click: () => { this.showBigPic(a) } }
                })
            }
          }, {
            title: '图片4',
            key: 'picUrl4',
            align: 'center',
            minWidth: 70,
            render: (h, p) => {
              let a = p.row.picUrl4
              return h('img',
                {
                  attrs: { src: a },
                  style: { width: '100%', height: '30px' },
                  on: { click: () => { this.showBigPic(a) } }
                })
            }
          }, {
            title: '评分说明',
            key: 'ratingDescription',
            align: 'center',
            minWidth: 200,
            render: (h, params) => {
              return h('div', [
                h('span', {
                  style: {
                    display: 'inline-block',
                    width: '100%',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  },
                  domProps: {
                    title: params.row.ratingDescription
                  }
                }, params.row.ratingDescription)
              ])
            }
          },
          {
            title: '提交人',
            key: 'submitter',
            align: 'center',
            minWidth: 100
          },
          {
            title: '提交时间',
            key: 'insertTime',
            align: 'center',
            minWidth: 160,
            render: (h, p) => {
              let r = (p.row.insertTime).slice(0, 19)
              return h('div', r)
            }
          },
          {
            title: '考核状态',
            // key: "assessmentStatus",
            align: 'center',
            minWidth: 100,
            render: (h, p) => {
              let a = p.row.assessmentStatus
              let r, color
              switch (a) {
                case 1:r = '未审核'; color = 'warning'; break
                case 2:r = '已审核'; color = 'success'; break
                default: r = a; break
              }
              return h('Tag', { props: { color: color } }, r)
            }
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 120,
            fixed: 'right',
            render: (h, p) => {
              return h('div', [
                h('i-button', {
                  props: { type: 'primary', disabled: p.row.assessmentStatus == 2 },
                  on: { click: () => { this.checked(p.row.id) } }
                }, '审核该任务')
              ])
            }
          }
        ]
      },

      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        scoreId: '', // 任务编号
        assessmentStatus: '' // 考核状态
      },
      modal1: false
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    // 获取列表
    async getTableData () {
      console.log(this.queryData)
      this.queryData.totalRecord = undefined
      let result = (await gcDispenserApi.getData(this.url + 'page', this.queryData)).data
      console.log('result:', result)
      this.list.tableData = result.list
      this.queryData.totalRecord = result.totalRecord
      this.queryData.limit = result.pageSize
    },
    // 分页切换
    changePage (index) {
      this.queryData.page = index
      this.getTableData()
    },
    // 查询
    inQuire () {
      this.queryData.page = 1
      this.getTableData()
    },
    // 更新
    async updata (index) {
      let c = this.creaUp
      c.modal1 = true
      c.med = 'up'
      c.title = '编辑任务'
      this.upid = index
      // c.data.id = index
      let r = (await gcDispenserApi.getData(this.url + index)).data
      c.data.scoreId = r.scoreId
      c.data.taskDescription = r.taskDescription
      c.data.taskType = r.taskType
      c.data.taskScenes = String(r.taskScenes)
      c.data.taskProcess = String(r.taskProcess)
      c.data.inspectors = r.inspectors
      c.data.endTime = r.endTime
      c.data.taskStatus = String(r.taskStatus)
      console.log('up', r)
    },

    all () {
      this.queryData.scoreId = ''
      this.queryData.taskStatus = ''
      this.getTableData()
    },
    showBigPic (item) {
      this.modal.bigPicVisible = true
      this.modal.bigPicUrl = item
    },
    // 审核
    checked (index) {
      this.modal1 = true
      this.cId = index
      console.log(this.cId)
    },
    // 审核提交
    async ok () {
      let result = await gcDispenserApi.update(this.url + this.cId, this.queryData)
      console.log(result)
      if (result.data) {
        this.$Message.success('操作成功')
        this.getTableData()
      } else {
        this.$Message.error(result.message)
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
